import { v4 as uuidv4 } from "uuid";
import { form_items } from "./input";
import { queryExist } from "../action/router";

export const checkRouter = async (router_name) => {
  const result = await queryExist(router_name);

  if (result.status !== "success") {
    // show alert
    document.getElementsByName("router_alert")[0].classList.remove("hidden");
  }
};

export const checkName = async (routerName) => {
  if (!routerName) {
    // 把 name 为 "name" 的 input className 增加 input-error
    document.getElementsByName("router_alert")[0].classList.add("input-error");
    return;
  }
};

export function TextInput({ name, label, type, placeholder, defaultValue }) {
  return (
    <div key={uuidv4()} className="mb-4">
      <label
        className="mb-2 block text-sm font-bold text-gray-700"
        htmlFor="text-box"
      >
        {label}
      </label>
      <input
        className="input input-bordered w-full max-w-xl"
        id="text-box"
        name={name}
        type={type}
        placeholder={placeholder}
        defaultValue={defaultValue}
      />
    </div>
  );
}

export const RenderForm = ({ driverName, router }) => {
  const showFields = ["api_key", "url"];
  if (driverName && driverName.includes("文心")) {
    showFields.push("secret_key", "access_token");
  }
  if (driverName && driverName.includes("云雀")) {
    showFields.push("secret_key", "access_token", "region");
  }

  if (driverName && driverName.includes("星火")) {
    showFields.push("secret_key");

    // 改变 form_items Secret Key 的 Label 的说明
    form_items.find((item) => item.name === "secret_key").label =
      "Secret Key (对应讯飞的 api_secret)";
  }

  return form_items
    .filter((item) => showFields.includes(item.name))
    .map((item) => (
      <TextInput
        key={uuidv4()}
        name={item.name}
        label={item.label}
        type={item.type}
        placeholder={item.placeholder}
        defaultValue={router ? router[item.name] : ""}
      />
    ));
};

export const RouterName = ({ router }) => {
  return (
    <div>
      <label
        className="mb-2 block text-sm font-bold text-gray-700"
        htmlFor="text-box"
      >
        路由名称
      </label>
      <label
        className="input input-bordered flex items-center gap-2"
        name="router_input_label"
      >
        <input
          className="grow"
          name="name"
          type="text"
          placeholder="请输入唯一路由名称"
          onKeyDown={() => {
            // hidden input-error
            document
              .getElementsByName("router_input_label")[0]
              .classList.remove("input-error");
            // hidden alert_name
            document
              .getElementsByName("router_alert")[0]
              .classList.add("hidden");
          }}
          defaultValue={router ? router.name : ""}
          onBlur={(e) => checkRouter(e.target.value)}
        />
        <p className="badge badge-primary">
          <span className="text-md mr-1 mt-1">*</span>
          <span className="text-sm">必填</span>
        </p>
      </label>
      <div
        role="alert"
        className="alert alert-error hidden"
        name="router_alert"
      >
        <span>存在同名的路由名称</span>
      </div>
    </div>
  );
};

export const resetForm = () => {
  document.getElementById("modal-dialog").close();
  document.getElementById("router_form").reset();

  // 重置 input-error
  document
    .getElementsByName("router_input_label")[0]
    .classList.remove("input-error");

  // 隐藏 alert_name
  document.getElementsByName("router_alert")[0].classList.add("hidden");
};
